<template>
	<!-- 回收确认页面 -->
	<view class="RecycleConfirm">
		<view class="addButton">
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :range="classificationList"
				@change="onclassifiList" rangeKey="name" :value="multiIndex">
				<view class="icon iconfont icon-tianjia1"></view>
				<view>添加</view>
			</picker>
		</view>
		<!-- 选择的分类信息 -->
		<view class="classContent">
			<view class="classContent-main" v-for="(item,index) in pickerData" :key="index">
				<view @tap="cancel(index)" class="icon iconfont icon-quxiao"></view>
				<view class="category">
					<view>{{item.name}}</view>
					<view class="categoryType">{{item.children.name}}</view>
				</view>
				<view class="number-control">
					<view class="minus" @tap="minus(index)">-</view>
					<view class="numberContent">
						<input class="numberText" type="text" v-model="item.number" @input="numberChange" />
						<text>{{item.children.unit}}</text>
					</view>
					<view class="add" @tap="addNum(index)">+</view>
				</view>
				<view class="unit-price">
					<input type="text" v-model="item.price" placeholder="单价" @input="priceChange" />
				</view>
			</view>

		</view>
		<view class="Confirm-footer">
			<view class="cions">
				<view class="pay-cions">支付回收币：<text class="pay-cionsnum">{{payCions}}</text></view>
				<view class="profit-cions">利润回收币：<text class="profit-cionsnum">{{profitCions}}</text></view>
			</view>
			<view class="confirmButton" @tap="ConfirmReclaim">确认回收</view>
		</view>
		
	</view>
</template>

<script>
	import util from '../../component/commen/api/util'
	export default {
		data() {
			return {
				orderId: "", //订单id
				orderDaya: {},
				classificationList: [], //picker中的分类选择
				data: "", //初始分类数据信息
				multiIndex: [0, 0, 0],
				pickerData: [], //picker中选中的值
				payCions: "0.00", //支付回收币
				profitCions: "0.00", //利润回收币
				isPopup:false,//是否显示二维码分销
			}
		},
		onLoad(e) {
			this.orderId = e.orderId
		},
		onShow() {
			this.getOrderInfo()
		},
		methods: {
			getOrderInfo() { //请求接口获取订单信息
				var params = {
					do: "reserve",
					op: "orderDetail",
					id: this.orderId
				}
				util.requestWithSign(params).then(res => {
					console.log("订单详情", res)
					this.orderDaya = res.data
				})
				// 获取分类
				var paramSort = {
					do: "reserve",
					op: "cateList",
					partnerid: 0
				}
				util.requestWithSign(paramSort).then(res => { //获取客服号码
					this.data = res.data
					this.dataShift()
				})
			},
			onclassifiList(value) { //选择picker点击确定
				// console.log("选择的值：",value.detail.value)
				console.log(this.data)
				const oneIndex = value.detail.value[0]
				const towIndex = value.detail.value[1]
				const threeIndex = value.detail.value[2]
				console.log("picker中的值：", this.classificationList)
				console.log("第一个值：", this.classificationList[0][oneIndex])
				console.log("第二个值：", this.classificationList[1][towIndex])
				console.log("第三个值：", this.classificationList[2][threeIndex])
				const pickerOneId = this.classificationList[0][oneIndex].id
				const pickerTowId = this.classificationList[1][towIndex].id
				let ishave = this.pickerData.some(item => item.id === pickerOneId);
				console.log("id是否相同：", ishave)
				if (ishave) { //如果选择的类型数组中已经存在，则number+1并返回
					return this.pickerData.forEach((item, index) => {
						if (item.id == pickerOneId) {
							this.$set(this.pickerData, index, {
								...item,
								number: item.number + 1
							});
						}
					})
				}
				// console.log(pickerId)
				this.data.forEach(item => {
					if (item.id == pickerOneId) {
						console.log("循环中的item", item)
						item.children.forEach(event => {
							// console.log("循环的数据中的children：",event.unit)
							this.classificationList[1][towIndex].unit = event.unit
						})
					}
				})
				var obj = this.classificationList[0][oneIndex]
				obj.children = this.classificationList[1][towIndex]
				obj.consult = this.classificationList[2][threeIndex]
				obj.number = 1 //数量
				obj.price = 0 //单价
				this.pickerData.push(obj)
				console.log("picker中选中的值：", this.pickerData)
			},
			priceChange(e) { //输入单价
				console.log("改变单价：", this.pickerData)
				this.sumTotal()
			},
			sumTotal() { //计算总数
				const total = this.pickerData.reduce((accumulator, currentValue) => {
					return accumulator + (currentValue.number * currentValue.price);
				}, 0).toFixed(2);
				this.payCions = total
				this.profitCions = (-total).toFixed(2);
				console.log(this.payCions, this.profitCions)
			},
			numberChange(e) { //输入数量
				console.log("改变数量：", this.pickerData)
				this.sumTotal()
			},
			bindMultiPickerColumnChange(e) { //滑动触发
				console.log("修改的列为", e, e.detail.column, "，值为", e.detail.value)
				if (e.detail.column === 0) {
					if (0 == e.detail.column) {
						this.multiIndex[0] = e.detail.value;
						this.multiIndex[1] = 0;
						this.multiIndex[2] = 0;
						console.log("aaaaaaaaaaaaaaa", this.multiIndex);
						this.dataShift();
					} else if (1 == e.detail.column) {
						this.multiIndex[1] = e.detail.value;
						this.multiIndex[2] = e.detail.value;
						console.log("bbbbbbbbbbbbb", this.multiIndex);
						this.dataShift();
					}
				}
			},
			cancel(index) { //点击取消按钮
				this.pickerData.splice(index, 1) //删除所点击取消的数据
				this.sumTotal()
			},
			minus(index) { //点击减号
				console.log(index)
				if (this.pickerData[index].number <= 1) {
					return;
				} else {
					this.$set(this.pickerData[index], 'number', this.pickerData[index].number - 1);
					this.sumTotal()
				}
				console.log(this.pickerData[index].number)
			},
			addNum(index) { //点击加号
				console.log(index)
				this.$set(this.pickerData[index], 'number', this.pickerData[index].number + 1);
				console.log(this.pickerData[index].number)
				this.sumTotal()
			},
			dataShift() {
				// 初始化一个空数组，用于存储三个级别的选项
				var options = [
					[],
					[],
					[]
				];
				// 遍历一级选项，将其添加到第一个级别的数组中
				this.data.forEach((type) => {
					console.log("000", type, options);
					options[0].push({
						id: type.id,
						name: type.name
					});
				});

				// 遍历当前一级选项下的二级选项，将其添加到第二个级别的数组中
				this.data[this.multiIndex[0]].children.forEach((child) => {
					options[1].push({
						id: child.id,
						name: child.name,
						unit: child.unit
					});
				});

				// 遍历当前二级选项下的三级选项，将其添加到第三个级别的数组中
				this.data[this.multiIndex[0]].children[this.multiIndex[1]].children.forEach((
					grandchild) => {
					options[2].push({
						name: grandchild.reference,
						user_price: grandchild.user_price,
						collector_price: grandchild.collector_price
					});
				});
				console.log("最终数据：", this.multiIndex)
				// 更新组件的选项数组，并强制重新渲染
				console.log("111111", options)
				this.classificationList = options;
				this.$forceUpdate();
			},
			ConfirmReclaim() { //点击确认回收
				this.processPickerData(this.pickerData)
					.then(actual => {
						if (actual.length == 0) {
							console.log("请先选择类型");
							uni.showToast({
								title: "请先选择类型",
								icon: "none"
							});
							return reject(new Error("请先选择类型"));
						}
						var params = {
							do: "collector",
							op: "recycleSure",
							orderid: this.orderId, //订单id
							collectorid: uni.getStorageSync("collectorid"), //回收员id
							actual: actual,
							total: this.payCions,
							pay_type: "2" //支付类型
						};
						return util.requestWithSign(params);
					})
					.then(res => {
						console.log("确认回收返回结果", res);
						if (res.errno == 0) {
							uni.showModal({
								title: "确认成功",
								showCancel: false,
								success() {
									uni.navigateBack();
								}
							});
						}
					})
					.catch(error => {
						console.error("处理数据或请求时出错:", error);
					});
			},
			processPickerData(pickerData) { //处理请求
				return new Promise((resolve, reject) => {
					const actual = [];
					pickerData.forEach(item => {
						if (item.price == 0) {
							console.log("未输入单价");
							uni.showToast({
								title: "请输入单价",
								icon: "none"
							});
							return reject(uni.showToast({
								title: "请输入单价",
								icon: "none"
							}));
						}
						let obj = {
							firsId: item.id,
							firstVal: item.name,
							secondId: item.children.id,
							secondVal: item.children.name,
							price: item.price,
							number: item.number,
							unit: item.children.unit,
							user_price: item.price * item.number
						};
						actual.push(obj);
					});

					resolve(actual);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.RecycleConfirm {
		padding-bottom: 150rpx;

		.addButton {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 10rpx;

			.icon-tianjia1 {
				font-size: 50rpx;
				margin-right: 6rpx;
			}

			// .addicon{
			// 	display: inline-block;
			// 	width: 50rpx;
			// 	height: 50rpx;
			// 	line-height: 50rpx;
			// 	text-align: center;
			// 	background: #00b388;
			// 	color: #fff;
			// 	font-weight: bold;
			// 	border-radius: 50%;
			// }
		}

		.classContent {
			padding: 0 20rpx;
			box-sizing: border-box;

			.classContent-main {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				background: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				box-sizing: border-box;

				.icon-quxiao {
					color: #d10000;
					font-size: 45rpx;
				}

				.category {
					width: 20%;
					// border: 1rpx solid #f00;
					margin-left: 20rpx;

					.categoryType {
						margin-top: 8rpx;
						color: #818181;
					}
				}

				.number-control {
					margin-left: 100rpx;
					display: flex;

					.minus,
					.add {
						width: 40rpx;
						height: 40rpx;
						border-radius: 10rpx;
						line-height: 40rpx;
						text-align: center;
						background: #dddddd;
						color: #818181;
					}

					.numberContent {
						width: 100rpx;
						height: 40rpx;
						display: flex;
						// line-height: 40rpx;
						align-items: center;
						background: #f3f3f3;
						border-radius: 10rpx;
						padding: 0 20rpx;
						margin: 0 10rpx;
						text-align: center;
						font-size: 25rpx;

						.numberText {
							// border: 1px solid #d10000;
							width: 80%;
							height: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: center;
						}
					}
				}

				.unit-price {
					margin-left: auto;
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 2rpx solid #eaeaea;
					border-radius: 10rpx;

					input {
						text-align: center;
					}
				}
			}

		}

		.Confirm-footer {
			display: flex;
			width: 100%;
			align-items: center;
			position: fixed;
			bottom: 0;
			height: 120rpx;
			background: #fff;
			padding: 20rpx;
			box-sizing: border-box;

			.cions {
				font-size: 25rpx;
				margin-right: 80rpx;

				.pay-cions {
					color: #818181;

					.pay-cionsnum {
						color: #00b388;
					}
				}

				.profit-cions {
					margin-top: 10rpx;

					.profit-cionsnum {
						color: #ffaa00;
					}
				}
			}

			.confirmButton {
				width: 300rpx;
				height: 80rpx;
				margin-left: auto;
				line-height: 80rpx;
				background: #00b388;
				color: #fff;
				text-align: center;
				border-radius: 20rpx;
			}
		}
	}
</style>